<template>
	<view class="s-list">
		<Header title="检查人" :autoBack="false" @leftClick="back"></Header>
		<!-- 搜索 -->
		<view class="s-search-box">
			<uv-search :clearabled="true" placeholder="检查人名称" :showAction="false" @focus="searchFun()"></uv-search>
		</view>
		<!-- 搜索-end -->
		<view class="s-list-main">
			<view class="s-box pad25">
				<view class="s-check-box">
					<uv-checkbox-group v-model="allBoxValue" iconPlacement="left" placement="column">
						<uv-checkbox :checked="allCheck" name="apple" label="全选" @change="allChecked"></uv-checkbox>
					</uv-checkbox-group>
					<view class="right">已选择:{{ checkboxValue.length }}/{{ groupList.length }}</view>
				</view>
				<view class="s-check-group">
					<uv-checkbox-group v-model="checkboxValue" iconPlacement="left" placement="column" @change="changeCheckbox">
						<uv-checkbox :checked="item.checked" :name="item.name" :label="item.name" v-for="(item, index) in groupList" :key="index"></uv-checkbox>
					</uv-checkbox-group>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="s-btn-common">
			<uv-button type="primary" text="确认" @click="confirmFun()"></uv-button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
onLoad((option) => {
	if(option.data){
		let obj = JSON.parse(decodeURIComponent(option.data));
		checkboxValue.value = obj.checkboxValue;
		// 检查人点击传过来的值全选中状态
		if(checkboxValue.value.length == groupList.value.length){
			allCheck.value = true

		}
	}


});
const queryForm = reactive({
	// 查询条件
	pageSize: 10,
	pageNum: 1,
	verificationFlag: '0'
});
const total = ref(0);
const freshing = ref(false);
const triggered = ref(false);
const emptyFlag = ref(false);
const loadingType = ref('noMore');
const contentText = reactive({
	contentdown: '上拉显示更多',
	contentrefresh: '正在加载...',
	contentnomore: '没有更多数据了'
});
// 返回列表页面
const back =()=>{
	uni.redirectTo({
		url: '/packageDailyCheck/pages/startCheck/index'
	});
}
// 点击确认
const confirmFun = () => {
	let data = {
		checkboxValue: checkboxValue.value,
	};
	uni.redirectTo({
		url: '/packageDailyCheck/pages/startCheck/index?data=' + encodeURIComponent(JSON.stringify(data))
	});
	console.log('checkboxValuecheckboxValue',checkboxValue.value)
};

//默认选择0
const allBoxValue = ref([]);
//选中的数组所有的值
const checkboxValue = ref([]);
//选择数组
const groupList = ref([
	{
		name: '王老二',
		id: '222',
		checked: false
	},
	{
		name: '王老三',
		id: '23344545',
		checked: false
	},
	{
		name: '王无',
		id: '233445',
		checked: false
	},
	{
		name: '王三',
		id: '234545',
		checked: false
	}
]);
const allCheck = ref(false);
//数组改变事件
const changeCheckbox = (e) => {
	console.log('111', e);
	//循环列表先都置为false （未选中状态）
	groupList.value.forEach((a) => {
		a.checked = false;
		allCheck.value = false;
	});
	//然后假如checkboxGroup传过来的 detail.value中有某个id则把这些元素的checked属性置为true(选中状态)
	groupList.value.forEach((a) => {
		e.forEach((b) => {
			if (a.value == b) {
				a.checked = true;
			}
		});
	});
	//如果选中的checkbox的value的数组长度和后端传过来的数组长度相等则为全选状态 allCheck为true
	if (e.length == groupList.value.length) {
		allCheck.value = true;
	}
	//将选中的数组保存在某个ref中
	checkboxValue.value = e;
};
//全选 以及反选
const allChecked = () => {
	//更改选中状态
	allCheck.value = !allCheck.value;
	if (allCheck.value == true) {
		groupList.value.forEach((a) => {
			a.checked = true;
		});
		checkboxValue.value = groupList.value.map((item) => {
			return item.name;
		});
	} else {
		groupList.value.forEach((a) => {
			a.checked = false;
		});
		checkboxValue.value = [];
	}

};
</script>

<style scoped lang="scss"></style>
